<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<link rel="apple-touch-icon" sizes="76x76" href="./assets/img/favicon.ico">
	<link rel="icon" type="image/png" href="./assets/img/favicon.ico">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>数据要素流通平台</title>
	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
		name='viewport' />


	<!-- Font Awesome Icons -->
	<link rel="stylesheet" href="#"
		integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

	<!-- Main CSS -->
	<link href="./assets/css/main.css" rel="stylesheet" />

	<!-- Animation CSS -->
	<link href="vendor/aos.css" rel="stylesheet" />
	<link href="./assets/layui/css/layui.css" rel="stylesheet">
	<style>
		body {
			font-size: 17px;
		}

		.nav-item .active {
			font-weight: 600;
		}

		.card {
			cursor: pointer;
		}

		.card ul li {
			margin-bottom: 0.5rem !important;
		}

		.card-body {
			padding: 0.5rem 1.25rem;
		}

		.filterText {
			display: block;
			float: left;
			height: 24px;
			line-height: 24px;
			font-size: 15px;
			color: #373d41;
			margin-right: 28px;
			cursor: pointer;
		}

		.cover {
			width: 100%;
			height: 180px;
			overflow: hidden;
		}

		.Product .card img {
			width: 100%;
			height: 180px;
			transition: all .5s linear;
		}

		.Product .card {
			flex: none;
			width: 22.5% !important;
			margin-left: 1.25% !important;
			margin-right: 1.25% !important;
			margin-bottom: 20px;
		}

		@media (max-width: 1680px) {
			.Product .card {
				width: 22.5% !important;
				margin-left: 1.25% !important;
				margin-right: 1.25% !important;
			}
		}

		@media (max-width: 1180px) {
			.Product .card {
				width: 30% !important;
				margin-left: 1.66% !important;
				margin-right: 1.66% !important;
			}
		}

		/* 典型用例大字 */
		/* 大于1680px：默认 */
		/*1360px ——1680px */
		@media (max-width: 1680px) {
			.jumbotron {
				padding-top: 9rem;
			}
		}

		/* 小于1360px */
		@media (max-width: 1360px) {
			.display-3 {
				font-size: 55px;
			}

			.display-3 p {
				font-size: 55px;
			}

			.jumbotron {
				padding-top: 11rem;
			}
		}

		.searchform {
			float: right;
			width: 320px;
			margin-right: 0 !important;
			padding: 0;
			margin-top: 20px;
		}

		.searchform i {
			position: absolute;
			color: rgb(139, 139, 139);
			margin-top: 10.6px;
			margin-left: 10px;
		}

		.searchform input {
			padding-left: 32px;
			width: 305px;
			font-size: 14px;
		}

		.pagehelper {
			padding-top: 0 !important;
			margin-top: -50px;
			margin-bottom: 20px;
		}

		.nav-item .active1 {
			font-weight: 600;
			color: #0F74B5;
		}

		.searchbox {
			font-size: 15px;
			margin-bottom: 30px;
		}

		.searchbox span {
			line-height: 49.6px;
			font-size: 17px;
			color: #666666;
		}

		.searchbox .nav3 {
			width: 50%;
			float: left;
			margin-left: -16px;
			margin-top: 15px;
		}

		.searchbox a {
			color: #666666;
		}

		.searchbox a:hover {
			color: #0F74B5;
		}

		.searchform {
			float: right;
			width: 320px;
			margin-right: 0 !important;
			padding: 0;
			margin-top: 20px;
		}

		.searchform i {
			position: absolute;
			color: rgb(139, 139, 139);
			margin-top: 10.6px;
			margin-left: 10px;
		}

		.searchform input {
			padding-left: 32px;
			width: 305px;
			font-size: 14px;
		}

		.searchHeaderBox {
			position: absolute;
			top: 83px;
			z-index: 1999;
			background-color: white;
			width: 400px;
			left: 856px;
			padding: 10px;
		}

		.searchHeaderBox .label {
			padding: 3px 8px;
			border: 1px solid #d8d8d8;
			margin-right: 12px;
			margin-bottom: 10px;
		}

		::-webkit-input-placeholder {
			/* WebKit browsers */
			color: #999;
			font-size: 14px;
		}

		::-moz-placeholder {
			/* Mozilla Firefox 19+ */
			color: #999;
			font-size: 14px;
		}

		:-ms-input-placeholder {
			/* Internet Explorer 10+ */
			color: #999;
			font-size: 14px;
		}
		.page-link:focus {
			z-index: 2;
			outline: 0;
			box-shadow: none;
		}
	</style>
</head>

<body>

	<!----------------------------------------------------------------------
NAVBAR (remove topnav if you don't want changed nav background on scroll)
------------------------------------------------------------------------>
	<nav class="topnav navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
		<div class="container-fluid">
			<a class="navbar-brand" href="./index.html"><i class="fas fa-globe-africa mr-2"></i><strong>数据流通云</strong>
			</a>
			<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarColor02"
				aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="navbar-collapse collapse" id="navbarColor02">
				<ul class="navbar-nav mr-auto d-flex align-items-center">
					<li class="nav-item">
						<a class="nav-link" href="./index.html">首页</a>
					</li>
					<li class="nav-item">
						<a class="nav-link active" href="./typicalCases.html">数据资源</a>
					</li>
					<li class="nav-item dropdown">
						<a class="nav-link" href="productStore.html">数据产品 </a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="./customShop.html">定制数据</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="./developer.html">开发者</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="./newMessage.html">最新消息</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="./accessData.html">数据访问</a>
					</li>

					<li class="nav-item highSerachBtn">
						<div class="col pt-4 pb-4">
							<a class="btn btn-lg btn-outline-white btn-round searchKeyword text-white"><span
									class="iconbox border-0" style="margin-right: 5px;"><i
										class="fas fa-search"></i></span>搜索</a>
						</div>
					</li>
				</ul>
				<ul class="navbar-nav ml-auto d-flex align-items-center">
					<li class="nav-item">
						<a class="nav-link myBtn" href="javascript:;">
							<span class="iconbox border-0" style="margin-right: 5px;"><i
									class="fas fa-cart-arrow-down"></i></span>产品袋
						</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="./mySpace.html">
							<span class="iconbox border-0" style="margin-right: 5px;"><i
									class="fas fa-book-reader"></i></span>我的空间 </a>
					</li>
					<li class="nav-item disabledNone" id="userInfo">
						<ul class="layui-nav" style="background-color: rgba(244, 244, 244, 0);padding: 0;">
							<li class="layui-nav-item">
							  <a href="javascript:;" style="color: #353c58 !important;">
								  <span class="iconbox border-0" style="margin-right: 5px;"><i class="iconfont icon-user-fill"></i></span>
								  用户：<span id="accunt">登录过期</span>
							  </a>
							  <dl class="layui-nav-child">
								<dd><a href="./changePassword.html">修改密码</a></dd>
								<dd><a href="" id="logOutBtn">退出登录</a></dd>
							  </dl>
							</li>
						  </ul>
					</li>
					<li class="nav-item disabledNone" id="attestation">
						<a class="nav-link" style="color:#FF820C;padding-left: 0px;font-size:12px;cursor: pointer;">未认证</a>
					</li>
					<li class="nav-item disabledNone noUser">
						<a class="nav-link" href="./login.html">
							<span class="iconbox border-0" style="margin-right: 5px;"><i
									class="fas fa-user"></i></span>登录 </a>
					</li>
					<li class="nav-item disabledNone noUser">
						<span class="nav-link" href="./register.html">
							<a class="btn btn-cyan btn-round shadow-sm text-white" href="./register.html">
								<i class="fab fa-github"></i> 立即注册 <a href="#" class="downloadzip" class="hidden"></a>
							</a>
						</span>
					</li>
				</ul>
			</div>
		</div>
	</nav>
	<!-- End Navbar -->

	<div class="searchHeaderBox disabledNone">
		<div>
			<span style="position: absolute;right: 20px;cursor: pointer;z-index: 9999;"
				id="closeSearchHeaderBox">X</span>
			<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
				<ul class="layui-tab-title">
					<li class="layui-this">关键字</li>
					<li>级别限制</li>
					<li>授权码</li>
				</ul>
				<div class="layui-tab-content">
					<div class="layui-tab-item layui-show">
						<div class="col" style="padding: 0;position: relative;">
							<img src="assets/img/demo/serach.png"
								style="width: 20px;height: 20px;position: absolute;left: 0;top: 7px;">
							<input type="search" class="form-control" placeholder="请输入关键字进行搜索"
								style="border-top:0px;border-left:0px;border-right:0px;border-radius: 0;padding-left: 30px;">
							<span
								style="cursor: pointer;position: absolute;top: 7px;right: 10px;font-size: 14px;">搜索</span>
						</div>
						<div class="mt-3">
							<p style="font-size: 12px;color: #666666;margin-bottom: 5px;">搜索发现</p>
							<div style="font-size: 12px;color: #666666;">
								<span class="label">规范</span>
								<span class="label">授权码</span>
								<span class="label">级别</span>
								<span class="label">消息</span>
							</div>
						</div>
					</div>
					<div class="layui-tab-item">
						<div class="col" style="padding: 0;position: relative;">
							<img src="assets/img/demo/serach.png"
								style="width: 20px;height: 20px;position: absolute;left: 0;top: 7px;">
							<input type="search" class="form-control" placeholder="请输入限制用户级别"
								style="border-top:0px;border-left:0px;border-right:0px;border-radius: 0;padding-left: 30px;">
							<span
								style="cursor: pointer;position: absolute;top: 7px;right: 10px;font-size: 14px;">搜索</span>
						</div>

					</div>
					<div class="layui-tab-item">
						<div class="col" style="padding: 0;position: relative;">
							<img src="assets/img/demo/serach.png"
								style="width: 20px;height: 20px;position: absolute;left: 0;top: 7px;">
							<input type="search" class="form-control" placeholder="请输入授权码"
								style="border-top:0px;border-left:0px;border-right:0px;border-radius: 0;padding-left: 30px;">
							<span
								style="cursor: pointer;position: absolute;top: 7px;right: 10px;font-size: 14px;">搜索</span>
						</div>

					</div>
				</div>
			</div>
		</div>

	</div>
	<!-------------------------------------- HEADER --------------------------------------->
	<div class="jumbotron jumbotron-fluid mb-3 bg-primary position-relative">
		<div class="container text-white h-100 tofront">
			<div class="row align-items-center justify-content-center text-center">
				<div class="col-md-10">
					<h1 class="display-3">典型用例<p>Typical Use Cases</p>
					</h1>
				</div>
			</div>
		</div>
	</div>
	<!-- End Header -->


	<!-------------------------------------- MAIN --------------------------------------->
	<div class="container pt-2 pb-5">


		<section class="pt-4" data-aos="fade-up">
			<!-- <h3 class="h5 mb-3" style="display: flex;">
			<div style="width: 100px;">客户行业</div>
			<div style="width: calc(100% - 100px);">
				<span class="filterText">全部</span>
				<span class="filterText">网站</span>
				<span class="filterText">IT与软件</span>
				<span class="filterText">新闻媒体</span>
				<span class="filterText">社交</span>
				<span class="filterText">电子商务/电商平台</span>
				<span class="filterText">游戏</span>
				<span class="filterText">音视频</span>
				<span class="filterText">金融</span>
				<span class="filterText">教育</span>
				<span class="filterText">医疗健康</span>
				<span class="filterText">互联网</span>
				<span class="filterText">交通运输</span>
				<span class="filterText">建筑/地产</span>
				<span class="filterText">政府事业单位</span>
				<span class="filterText">城市服务</span>
				<span class="filterText">生产制造</span>
				<span class="filterText">交通运输</span>
				<span class="filterText">建筑/地产</span>
				<span class="filterText">政府事业单位</span>
				<span class="filterText">城市服务</span>
				<span class="filterText">生产制造</span>
				<span class="filterText">其他</span>
			</div>
		</h3>
		<h3 class="h5 mb-3" style="display: flex;">
			<div style="width: 100px;">公司规模</div>
			<div style="width: calc(100% - 100px);">
				<span class="filterText">全部</span>
				<span class="filterText">10人以下</span>
				<span class="filterText">10-50人</span>
				<span class="filterText">50-100人</span>
				<span class="filterText">100-200人</span>
				<span class="filterText">200人以上</span>
			</div>
		</h3> -->
			<h3 class="h5 mb-3" style="display: flex;">
				<div style="width: 100px;">应用分类</div>
				<div style="width: calc(100% - 100px);">
					<span class="filterText">全部</span>
					<span class="filterText">视频</span>
					<span class="filterText">图像</span>
					<span class="filterText">办公管理</span>
					<span class="filterText">人工智能</span>
					<span class="filterText">数据智能</span>
					<span class="filterText">第三方方案集成</span>
					<span class="filterText">建站平台</span>
					<span class="filterText">其他</span>
				</div>
			</h3>
			<!-- 搜索 -->
			<div class="searchbox">
				<ul class="nav nav3">
					<li class="nav-item">
						<a class="nav-link active1" href="#">综合排序</a>
					</li><span>|</span>
					<li class="nav-item">
						<a class="nav-link" href="#">最近更新</a>
					</li><span>|</span>
					<li class="nav-item">
						<a class="nav-link" href="#">最高人气</a>
					</li><span>|</span>
					<li class="nav-item">
						<a class="nav-link" href="#">最好评价</a>
					</li>
				</ul>
				<div class="form-group searchform">
					<div class="col-sm-10">
						<i class="fas fa-search"></i>
						<input type="search" id="input" class="form-control" value="" placeholder="请输入关键字搜索产品">
					</div>
				</div>
				<div style="clear: both;"></div>
			</div>
		</section>
		<section class="pt-2 pb-5" data-aos="fade-up">
			<div class="card-deck card-pricing mb-5 Product">
				<!-- <div class="card border-0 shadow-sm">
				<div class="border-0 cover">
					<img src="assets/img/demo/73db5dafcf19962933310a57bf2c10de.jpeg">
				</div>
				<div class="card-body">
					<ul class="list-unstyled mt-3 mb-4">
						<li style="font-size: 18px;font-weight: 500;">短信发送应用</li>
						<li style="font-size: 12px;color: #999;">短信应用 | 达州科技有限公司</li>
						<li>100人以上 其他 > </li>
					</ul>
				</div>
			</div>
			<div class="card border-0 shadow-sm">
				<div class="border-0 cover">
					<img src="assets/img/demo/75b066490d69e0948f0e4548005e39de.jpeg">
				</div>
				<div class="card-body">
					<ul class="list-unstyled mt-3 mb-4">
						<li style="font-size: 18px;font-weight: 500;">纳税人信息应用</li>
						<li style="font-size: 12px;color: #999;">数据应用 | 达州科技有限公司</li>
						<li>1000人以上 其他 > </li>
					</ul>
				</div>
			</div> -->

			</div>


		</section>
		<!-- 分页 -->
		<section class="pt-4 pb-5 pagehelper" data-aos="fade-up">
			<nav aria-label="Page navigation example" style="float: right;">
				<ul class="pagination">

				</ul>
			</nav>
		</section>
	</div>
	<!-- End Main -->



	<!-------------------------------------- FOOTER 底部 --------------------------------------->

	<footer class="bg-black pb-5" style="padding-top: 20px;padding-bottom: 20px !important;background-color: #03CA93;">
		<div class="container">
			<div class="row" style="text-align: center;">
				<div class="col-12 col-md mr-4">
					<small class="d-block mt-3 text-muted" style="color: white !important;">
						<p style="color: white;margin-top: 10px;font-size: 30px;">数据要素流通平台</p>
						Copyright @ 2022 数据要素流通平台-版权所有 蜀ICP备202223603号
					</small>
				</div>
			</div>
		</div>
	</footer>
	<!-- End Footer -->



	<!-------------------------------------- JAVASCRIPTS --------------------------------------->
	<script src="vendor/jquery.min.js" type="text/javascript"></script>
	<script src="vendor/popper.min.js" type="text/javascript"></script>
	<script src="vendor/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
	<script src="js/functions.js" type="text/javascript"></script>
	<script src="./assets/layui/layui.js" type="text/javascript"></script>
	<script src="js/tool.js" type="text/javascript"></script>
	<script src="js/header.js" type="text/javascript"></script>

	<!-- Animation -->
	<script src="vendor/aos.js" type="text/javascript"></script>
	<noscript>
		<style>
			*[data-aos] {
				display: block !important;
				opacity: 1 !important;
				visibility: visible !important;
			}
		</style>
	</noscript>
	<script>
		AOS.init({
			duration: 700
		});
	</script>

	<!-- Disable animation on less than 1200px, change value if you like -->
	<script>
		AOS.init({
			disable: function () {
				var maxWidth = 1200;
				return window.innerWidth < maxWidth;
			}
		});
	</script>
	<script>
		$(function () {
			$(".Product").delegate(".card", "click", function () {
				let serverId = $(this).attr("data-serverId");
				let dataId = $(this).attr("data-Id");
				if (serverId == 'null') {
					window.open($(this).attr("data-url"));
				} else {
					window.location.href = './tCasesDetial.html?serverId=' + serverId + '&dataId=' + dataId;
				}

			});
			//请求列表数据
			// 分页渲染
			let pageNumber=0; //页数
			$.ajax({
       timeout:30000,
				type: 'GET',
				url: window.Http + "/customer/application/list",
				headers: {
					'Authorization': "Bearer " + sessionStorage.getItem('Token')
				},
				success: function (res) {
					if (res.code == 200) {
						pageNumber=Math.ceil(res.rows.length/8);
						let html='';
						$('.pagination').empty();
						$('.pagination').append(`<li class="page-item previous"> <a class="page-link" href="#" aria-label="Previous">
							<span aria-hidden="true">&laquo;</span></a></li>
							<li class="page-item next"><a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>`)
						for(var i=1;i<=pageNumber;i++){
							html+=`<li class="page-item"><a class="page-link pageN" href="#">`+i+`</a></li>`
						}
						$('.pagination li:first-child').after(html)
						$('.pagination li:nth-child(2)').addClass('active')
					}
				}
			})

			// 发送请求
			function RequestListData(data) {
				$.ajax({
       timeout:30000,
					type: 'GET',
					url: window.Http + "/customer/application/list",
					headers: {
						'Authorization': "Bearer " + sessionStorage.getItem('Token')
					},
					data,
					success: function (res) {
						if (res.code == 200) {
							RenderHtml(res.rows);
						}
					}
				})
			}
			// 发送数据处理
			function Reqdata(num){
				let data = {
					isAdmin: 1,
					userId: 3,
					pageNum: num,
					pageSize: 8
				}
				// 发送请求
				RequestListData(data);
			}
			// 默认第一页
			Reqdata(1);
			// 分页(数字)
			$('.pagination').on('click', '.pageN', function (e) {
				e.preventDefault()
				// 获取页数
				let num = $(this)[0].innerHTML;
				Reqdata(num);
				// 样式更改
				$('.pagination li').removeClass('active')
				$(this).parent('li').addClass('active')
			})
			// 分页(上一页)
			$('.pagination').on('click','.previous',function (e) {
				e.preventDefault()
				// 获取当前页数
				let num = $(this).siblings('.active')[0].children[0].innerHTML;
				// console.log($(this).siblings('.active')[0].children[0].innerHTML);
				if (num > 1) {
					num -= 1;
					Reqdata(num);
					// 自己删除样式，前一个添加样式
					$('.pagination .active').removeClass('active').prev('li').addClass('active')

				}
			})
			// 分页(下一页)
			$('.pagination').on('click','.next',function (e) {
				e.preventDefault()
				// 获取当前页数
				let num = $(this).siblings('.active')[0].children[0].innerHTML;
				if (num <pageNumber) {
					num -=-1;
					Reqdata(num);
					// 自己删除样式，前一个添加样式
					$('.pagination .active').removeClass('active').next('li').addClass('active')

				}
			})

			//渲染Html节点
			function RenderHtml(data) {
				let html = "";
				$(".Product").empty();
				data.forEach(function (val, index) {
					let imgUrl = dealDefaultImg(val.chineseName);
					html += `<div class="card border-0 shadow-sm" data-Id=` + val.id + ` data-serverId=` + val.serverId + ` data-url="` + val.remark + `">
						<div class="border-0 cover">
							<img src="`+ imgUrl + `">
						</div>
						<div class="card-body">
							<ul class="list-unstyled mt-3 mb-4">
								<li style="font-size: 18px;font-weight: 500;">`+ val.chineseName + `</li>
								<li style="font-size: 12px;color: #999;">`+ (val.title ? val.title : "信息应用") + ` | 达州科技有限公司</li>
								<li>`+ (val.tagStr ? val.tagStr : "暂无描述") + ` </li>
							</ul>
						</div>
					</div>`
				})
				$(".Product").append(html);
			}

			//处理图片（正常情况应该接口返回）
			function dealDefaultImg(dataStr) {
				let imgUrl = "";
				if (dataStr.indexOf("三维") != -1) {
					imgUrl = "assets/img/demo/18e5f76040f71d118efdf5d8cb8bc44b.jpeg"
				} else if (dataStr.indexOf("电子地图") != -1) {
					imgUrl = "assets/img/demo/5fd4d56368385ac4e3a747b568133f95.jpeg"
				} else if (dataStr.indexOf("规局影像") != -1) {
					imgUrl = "assets/img/demo/38c78f228119cd7897437.png"
				} else if (dataStr.indexOf("短信") != -1) {
					imgUrl = "assets/img/demo/73db5dafcf19962933310a57bf2c10de.jpeg"
				} else if (dataStr.indexOf("纳税") != -1) {
					imgUrl = "assets/img/demo/75b066490d69e0948f0e4548005e39de.jpeg"
				} else if (dataStr.indexOf("评估") != -1) {
					imgUrl = "assets/img/demo/f116eaf1ca.png"
				} else if (dataStr.indexOf("肺结节") != -1) {
					imgUrl = "assets/img/demo/feijiehe.png"
				} else {
					imgUrl = "assets/img/demo/60c537328f5933f7f57ac8c2f34cfd1d.jpeg"
				}
				return imgUrl;
			}
			// 回车搜索
			$('#input').bind('keypress', function (e) {
				if (e.keyCode == '13') {
					// 获取搜索框输入的搜索内容
					let content = $(this)[0].value;
					let data = {
						page: 1,
						pageSize: 8,
						isAdmin: 1,
						userId: 3,
						keyword:content,
					}
					$.ajax({
       timeout:30000,
						type: 'GET',
						url: window.Http + "/customer/application/list",
						headers: {
							'Authorization': "Bearer" + sessionStorage.getItem('Token')
						},
						data: data,
						success: function (res) {
							if (res.code == 200) {
								RenderHtml(res.rows);
							}
						}
					})
				}
			})

			$('.nav3 .nav-item a').click(function (e) {
				e.preventDefault();
				$(".nav3 .nav-item a").removeClass('active1')
				$(this).addClass("active1")
			})



		})
	</script>

</body>

</html>
